﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../../src/test.css" rel="stylesheet" />
	<script src="../../../vendor/js/jquery.js"></script>
	<script src="../../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>列表控件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>默认</h5>
			<p>
				<select ud2="select">
					<option value="1">这是一个列表项目1</option>
					<option value="1">这是一个列表项目2</option>
					<option value="2">这是一个列表项目3</option>
					<option value="1">这是一个列表项目4</option>
					<option value="3">这是一个列表项目5</option>
					<option value="4">这是一个列表项目6</option>
					<option value="null">这是一个列表项目7</option>
					<option value="6">这是一个列表项目8</option>
					<option value="7">这是一个列表项目9</option>
					<option value="4">这是一个列表项目0</option>
				</select>
			</p>

			<hr class="hr" />

			<h5>多选列表</h5>
			<p>
				<select ud2="select" multiple>
					<option value="1">这是一个列表项目1</option>
					<option value="2">这是一个列表项目2</option>
					<option value="3">这是一个列表项目3</option>
					<optgroup disabled label="这是一个组">
						<option value="1">这是一个列表项目a</option>
						<option value="2">这是一个列表项目b</option>
						<option value="3">这是一个列表项目c</option>
					</optgroup>
					<optgroup label="这是一个组">
						<option value="4">这是一个列表项目a</option>
						<option value="5">这是一个列表项目b</option>
						<option value="6">这是一个列表项目c</option>
					</optgroup>
					<optgroup label="这是一个组3">
						<option value="1">这是一个列表项目a</option>
						<option value="7">这是一个列表项目b</option>
						<option disabled value="8">这是一个列表项目c</option>
					</optgroup>
				</select>
			</p>

			<hr class="hr" />

			<h5>选项及选项组操作</h5>
			<p>
				<select ud2="select" multiple></select>
				<div class="group group-justify">
					<button class="btn a" data-index="0">添加1个选项</button>
					<button class="btn a" data-index="1">删除1个选项</button>
					<button class="btn a" data-index="2">批量添加1000个选项</button>
				</div>
				<div class="group group-justify" style="margin-top: 4px;">
					<button class="btn a" data-index="3">添加1个选项组</button>
					<button class="btn a" data-index="4">删除1个选项组</button>
					<button class="btn a" data-index="5">向第1个组中添加选项</button>
					<button class="btn a" data-index="6">从第1个组中删除选项</button>
				</div>
				<script>
					$(function () {
						var select = ud2.select.collection[2], f = 0, g = 0;
						ud2.event($('.a')).setTap(function () {
							var index = this.data('index');
							switch (parseInt(index)) {
								case 0: {
									select.optionAdd(ud2.select.option('新添加的选项' + f++, 'x'));
									break;
								}
								case 1: {
									if (select.options[0]) select.options[0].selectOut();
									break;
								}
								case 3: {
									select.groupAdd(ud2.select.group('新添加的分组' + g++));
									break;
								}
								case 4: {
									select.groupRemove(select.groups[0]);
									break;
								}
								case 2: {
									var a = new Date();
									for (var i = 0; i < 1000; i++) select.optionAdd(ud2.select.option('新添加的选项' + f++, 'x'));
									var b = new Date();
									alert((b - a) / 1000 + 's');
									break;
								}
								case 5: {
									if (select.groups[0]) {
										ud2.select.option('新添加的选项' + f++, 'x').groupIn(select.groups[0]);
									}
									break;
								}
								case 6: {
									if (select.groups[0]) {
										if (select.groups[0].options[0]) {
											select.groups[0].options[0].groupOut();
										}
									}
									break;
								}
							}
						});
					});
				</script>
			</p>

			<hr class="hr" />

			<h5>获取或设置选项控件选择模式</h5>
			<p>
				<div class="group group-justify">
					<select ud2="select">
						<option value="1">这是一个列表项目1</option>
						<option value="1">这是一个列表项目2</option>
						<option value="2">这是一个列表项目3</option>
						<option value="1">这是一个列表项目4</option>
						<option value="3">这是一个列表项目5</option>
						<option value="4">这是一个列表项目6</option>
						<option value="null">这是一个列表项目7</option>
						<option value="6">这是一个列表项目8</option>
						<option value="7">这是一个列表项目9</option>
						<option value="4">这是一个列表项目0</option>
					</select>
					<button class="btn b">获取选择模式</button>
					<button class="btn b">选择模式：单选</button>
					<button class="btn b">选择模式：多选</button>
				</div>
				<script>
					$(function () {
						var select = ud2.select.collection[3];
						ud2.event($('.b')).setTap(function () {
							var index = $('.b').index(this);
							switch (index) {
								case 0: {
									alert(select.multiple() ? '多选' : '单选');
									break;
								}
								case 1: {
									select.multiple(0);
									break;
								}
								case 2: {
									select.multiple(1);
									break;
								}
							}
						});
					});
				</script>
			</p>

			<hr class="hr" />

		</div>
	</fieldset>


</body>
</html>
